<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>库存查询</title>
    <link rel="stylesheet" href="/box/layui/css/layui.css">
    <script src="/box/js/jquery-3.3.1.js"></script>
    <script src="/box/layui/layui.js"></script>
    <script src="/box/js/config.js"></script>
    <link rel="shortcut icon" href="/box/assets/ico/minus.png">
    <style>
        .box-pad {
            padding: 1%
        }
    </style>
</head>

<body>
    <div class="box-pad">
        <h1>库存查询</h1>
        <hr>
        <form class="layui-form" id="topForm" lay-filter="topForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">产品：</label>
                    <div class="layui-inline">
                        <input type="text" id="goodsName" class="layui-input" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">仓库：</label>
                    <div class="layui-inline">
                        <input type="text" id="storeName" class="layui-input" autocomplete="off">
                    </div>
                </div>
                <!--<div class="layui-inline">-->
                    <!--<label class="layui-form-label">仓库：</label>-->
                    <!--<div class="layui-inline">-->
                        <!--<select id="eleStocks">-->
                            <!--<option value="-1">请选择</option>-->
                        <!--</select>-->
                    <!--</div>-->
                <!--</div>-->
                <button type="button" class="layui-btn" style="margin-bottom: 10px" onclick="query()">查询</button>
            </div>
        </form>
        <table class="layui-table" id="stockTable" lay-filter="stockTable"></table>
        <script>
            var table;
            layui.use(['table','form'], function () {
                table = layui.table;
                var form = layui.form;

                table.render({
                    elem: '#stockTable'
                    ,url: 'http://localhost:8888/stock/list'
                    ,text: {none: '没有查到相关数据'}
                    ,page: true
                    ,even: true     //  隔行变色
                    ,limit: 10      //  修改每页显示的数据条数
                    ,id: 'stockTable'
                    ,cols: [[
                        {field:'stockId', title: '序号', width:60}
                        ,{field:'goods', title: '产品', templet: function (d) {
                                return d.goods.goodsName;
                            }
                        }
                        ,{field:'store', title: '仓库', templet: function (d) {
                                return d.store.storeName;
                            }
                        }
                        ,{field:'cargoLocation', title: '货位'}
                        ,{field:'number', title: '数量'}
                        ,{field:'remarks', title: '备注'}
                    ]]
                });

                // $.get("http://localhost:8888/store/list",function (d) {
                //     $.each(d.data,function () {
                //         var options = $("<option></option>").appendTo("#eleStocks");
                //         options.text(this.storeId).val(this.storeName);
                //     });
                //     form.render("select", "topForm");
                // });
            });

            function query() {
                table.reload("stockTable",{
                    page: {
                        //  从第一页开始
                        curr: 1
                    }
                    ,where: {
                        goodsName : $("#goodsName").val(),
                        storeName : $("#storeName").val()
                    }
                });
            }
        </script>
    </div>
</body>
</html>